<template>
	<view class="container">
		<view class="tab_box" >
			<view class="order_type_tab_box">
				<view :class="['order_type_tab_head',item.status===data.status? 'order_type_tab_head_active':'']"
					@click="tabChange(item)" v-for="(item,index) in tabStatus" :key="index">
					<view class="type_text">{{item.name}}</view>
					<view class="active_type"></view>
				</view>
			</view>
		</view>
		<view class="content" v-if="data.status=='0'">
			<view class="top_box">
				<view class="xjs-ml-32">
					<view class="xjs-size-26 xjs-pt-64 xjs-mb-16">可提现金额(元)</view>
					<view class="xjs-size-64 xjs-weight-bold">{{studioBalance.balance}}</view>
					<view class="xjs-size-26 xjs-mt-64">
						提现中(元)：¥ {{studioBalance.withdrawBalance}}
						<text class="xjs-ml-24 xjs-mr-24">|</text>
						已提现(元)：¥ {{studioBalance.totalBalance}}</view>
				</view>
				
				<view class="goWithdrawal_box"  @tap="goWithdrawal">
					<view class="goWithdrawal">
						<text>去提现</text>
						<uni-icons type="right" color="#FF6084" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="lf lf-between lf-center xjs-mt-64 xjs-ml-32 xjs-mr-32">
				<view class="xjs-size-32 xjs-weight-bold" @click="openApplyPetPopup">
					{{applyPetText}}
					<uni-icons :type="downUp" size="16"></uni-icons>
				</view>
				<view class="" @tap="goWithdrawalRecord">
					<text class="withdrawal_text">提现记录</text>
					<uni-icons type="right" color="#FF6084" size="13"></uni-icons>
				</view>
			</view>
			<view class="main" v-if="!data.loading">
				<view class="list_box" @click="goDetails(item.id)" v-for="(item,index) in data.list " :key='index'>
					<view>
						<view class="xjs-size-32" v-if="item.type==1">服务订单——服务收益</view>
						<view class="xjs-size-32" v-else-if="item.type==2">商城订单——推广收益</view>
						<view class="xjs-size-32" v-else-if="item.type==3">提现成功</view>
						<view class="xjs-size-32" v-else>服务订单——推广收益</view>
						<view class="revenue xjs-pt-16">{{item.createTime}}</view>
					</view>
					<view class="time_text" > ¥{{item.balance}}</view>
					<!-- <view class="time_text expenditures" v-else>
						-  ¥ {{item.amount}}
					</view> -->
				</view>
			</view>
			<view class="noRecord" v-else>
				暂无记录～
			</view>
		</view>
		<view class="content" v-else>
			<view class="top_box">
				<view class="xjs-ml-32">
					<view class="xjs-size-30 xjs-pt-64 xjs-mb-64">工作室成员余额汇总(元)</view>
					<view class="lf lf-around xjs-text-center">
						<view>
							<view class="xjs-size-30 xjs-mb-8">¥{{data.memberBalance.pendingWithdrawal}}</view>
							<view class="xjs-size-26">待提现(元）</view>
						</view>
						<view>
							<view class="xjs-size-30 xjs-mb-8">¥{{data.memberBalance.withdrawBalance}}</view>
							<view class="xjs-size-26">提现中(元）</view>
						</view>
						<view>
							<view class="xjs-size-30 xjs-mb-8">¥{{data.memberBalance.totalBalance}}</view>
							<view class="xjs-size-26">已提现(元）</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lf lf-between lf-center xjs-mt-64 xjs-mb-48 xjs-ml-32 xjs-mr-32">
				<view class="xjs-size-32 xjs-weight-bold" >全部成员余额明细</view>
			</view>
			<view class="user_list" v-for="(item,index) in data.list " :key='index' @click="goPresonal(item.userId)">
				<view class="user_info">
					<view class="lf lf-center">
						<image class="user_img" :src="item.user.avatar"></image>
						<view class="xjs-ml-8">
							<view class="xjs-weight-bold xjs-size-32">
								{{item.user.realName}}
							</view>
							<view class="user_text">
								<view>{{item.user.nickName}}</view>
								<view><text class="xjs-ml-8 xjs-mr-8">|</text> {{item.user.phone}}</view>
							</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="lf xjs-ml-32 xjs-mr-32">
					<view class="list_num">
						<view class="xjs-size-30 xjs-mb-8 xjs-mt-24">¥{{item.pendingWithdrawal}}</view>
						<view class="xjs-size-26">待提现(元）</view>
					</view>
					<view class="list_num xjs-ml-8 xjs-mr-8">
						<view class="xjs-size-30 xjs-mb-8 xjs-mt-24">¥{{item.withdrawBalance}}</view>
						<view class="xjs-size-26">提现中(元）</view>
					</view>
					<view class="list_num">
						<view class="xjs-size-30 xjs-mb-8 xjs-mt-24">¥{{item.totalBalance}}</view>
						<view class="xjs-size-26">已提现(元）</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="bottom" :is-mask-click="false" border-radius="24rpx"
			background-color="#fff">
			<view class="apply_pet">
				<view class="apply_pet_list">
					<view :class="data.experienceType === applyPetItem.type ? 'apply_pet_act': ''"
						v-for="(applyPetItem,applyPetIndex) in applyPet" :key="applyPetIndex"
						@tap="applyPetBtn(applyPetItem)">{{applyPetItem.name}}
					</view>
				</view>
				<view @tap="closeApplyPetPopup" class="xjs-btn-primary">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive , ref } from 'vue';
	import { onShow,onReachBottom,onLoad } from '@dcloudio/uni-app'
	import api from '@/api'
	const tabStatus = reactive([
		{ name: '工作室', status: '0' },
		{ name: '团队成员', status: '1' },
	])
	const applyPet = ref([
		{ name: '全部', type: '-1' },
		{ name: '服务订单——推广收益', type: '0' },
		{ name: '服务订单——服务收益', type: '1' },
		{ name: '商城订单——推广收益', type: '2' },
		{ name: '提现成功', type: '3' },
	])
	const applyPetText = ref('全部')
	const popupRef = ref()
	const downUp = ref('down')
	const applyPetBtn = (item) => {
		applyPetText.value = item.name
		data.experienceType = item.type
		data.list =[]
		data.page = 1
		getList()
		downUp.value = 'down'
		popupRef.value.close()
	}
	const openApplyPetPopup = () => {
		downUp.value = 'up'
		popupRef.value.open()
	}
	const closeApplyPetPopup = () => {
		downUp.value = 'down'
		popupRef.value.close()
	}
	let data = reactive<any>({
		list:[],
		page:1,
		limit:10,
		status : '0',
		loading: false,
		finished: false,
		experienceType:'-1',
		studioId:'',
		memberBalance:{}
	})	
	let studioBalance = ref({})
	const tabChange = async(item : any)=>{
		data.status = item.status
		data.list =[]
		data.loading = false
		data.page = 1
		if(data.status=='0'){
			getList()
		}else{
			getStudioMemberBalanceReport()
		}
	}
	
	const goPresonal =(userId: string)=>{
		uni.navigateTo({
			url:'/pages/income/personalBalance/index?userId='+userId
		})
	}
	const goDetails =(id: string)=>{
		uni.navigateTo({
			url:'/pages/income/balanceDetails/index?id='+id
		})
	}
	const goWithdrawal =()=>{
		uni.navigateTo({
			url:`/pages/income/initiateWithdrawal/index?type=1&studioId=${data.studioId}`
		})
	}
	const goWithdrawalRecord =()=>{
		uni.navigateTo({
			url:`/pages/income/withdrawalRecord/index?type=1&studioId=${data.studioId}`
		})
	}
	const getStudioBalance = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/balance/getStudioBalance/${data.studioId}`
		})
		studioBalance.value = res.data
	}
	
	const getStudioMemberBalanceReport =async()=>{
		uni.showLoading({
		  title: '加载中',
		  mask: true
		}) 
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/balance/getStudioMemberBalanceReport`,
			data:{
				studioId:data.studioId,
				page:data.page,
				limit:data.limit
			}
		})
		data.memberBalance = res.data
		if (res.data.list.length != 0) {
			data.finished = true
			data.list = data.list.concat(res.data.list);
		}else{
			data.finished = false
		}
		if (res.data.list.length <= 0) {
			data.loading = true
		}
		uni.hideLoading()
	}
	const getList =async()=>{
		uni.showLoading({
		  title: '加载中',
		  mask: true
		}) 
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/studioBalanceChange/page`,
			data:{
				balanceId:studioBalance.value.id,
				type:data.experienceType,
				page:data.page,
				limit:data.limit
			}
			
		})
		if (res.data.records.length != 0) {
			data.finished = true
			data.list = data.list.concat(res.data.records);
		}else{
			data.finished = false
		}
		if (data.list.length <= 0) {
			data.loading = true
		}
		uni.hideLoading()
	}
	onReachBottom(()=>{
		console.log(!data.loading ,'111')
		if (data.finished && !data.loading) {
			data.page++
			if(data.status=='0'){
				getList()
			}else{
				getStudioMemberBalanceReport()
			}
		}
	})
	onLoad((e) => {
		data.status = e.type
		data.studioId = e.studioId
	})
	onShow(async() => {
		await getStudioBalance()
		data.list =[]
		data.loading = false
		data.page = 1
		if(data.status=='0'){
			await getList()
		}else{
			await getStudioMemberBalanceReport()
		}
		uni.hideLoading()
	})
</script>

<style lang="scss" scoped>
	.apply_pet {
		padding: 0 32rpx;
		box-sizing: border-box;
		line-height: 1;
		.apply_pet_list {
			padding-bottom: 48rpx;
			max-height: 60vh;
			overflow-y: scroll;
			view {
				margin-top: 40rpx;
				width: 686rpx;
				height: 92rpx;
				line-height: 92rpx;
				box-sizing: border-box;
				background-color: #F5F6F7;
				text-align: center;
				font-size: 30rpx;
				color: #5C5E5E;
				border-radius: 400rpx;
			}
			.apply_pet_act {
				border: 2rpx solid #FF6084;
				background-color: #fff;
				color: #FF6084;
			}
		}
	}
	.tab_box{
		position: sticky;
		top: 0;
		z-index: 1;
	}
	.order_type_tab_box {
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		padding: 0 160rpx;
		box-sizing: border-box;
		border-top: 1px solid #F5F6F7;
	}
	.order_type_tab_head {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 88rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	
		.type_text {
			font-weight: 400;
			font-size: 30rpx;
			height: 100%;
			color: #5C5E5E;
			text-align: center;
		}
	
	}
	
	.order_type_tab_head_active {
		.type_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2120;
		}
	
		.active_type {
			bottom: 0;
			width: 44rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}
	.lf {
		display: flex;
	}
	.noRecord{
		margin-top: 48%;
		text-align: center;
		font-size: 32rpx;
	}
	.lf-between {
		justify-content: space-between;
	}
	.lf-center {
		align-items: center;
	}
	.lf-around {
		justify-content: space-around;
	}
	.container {
		padding-bottom: var(--safe-area-bottom);
		box-sizing: border-box;
	}
	.expenditures{
		color: #6363FF !important;
	}
	.content {
		// #ifdef APP
		padding-bottom: calc(24rpx + var(--safe-area-bottom));
		// #endif
		.top_box{
			width: 686rpx;
			height: 324rpx;
			background: linear-gradient( 105deg, #FF7D9E 0%, #FFB796 100%);
			border-radius: 24rpx;
			margin: 32rpx auto;
			color: #FFFFFF;
			position: relative;
		}
		.goWithdrawal_box{
			position: absolute;
			top:48rpx;
			right: 0;
			width: 176rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #FFFFFF;
			border-radius: 38rpx 0rpx 0rpx 38rpx;
			color: #FF6084;
			text-align: center;
		}
		.goWithdrawal{
			font-size: 28rpx;
		}
		.withdrawal_text{
			color: #FF6084;
			font-size: 26rpx;
		}
		.time_box {
			display: flex;
			justify-content: space-between;
			margin: 32rpx 32rpx 24rpx 32rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 32rpx;
		}
		.time_text {
			font-weight: bold;
			font-size: 32rpx;
		}
		.revenue {
			color: #7C807F;
			font-size: 26rpx;
		}
		.main{
			border-radius: 24rpx;
			background: #FFFFFF;
			margin: 32rpx;
		}
		.list_box{
			display: flex;
			justify-content: space-between;
			padding: 48rpx 0;
			border-bottom: 1rpx solid #E4E6E6;
			align-items: center;
			margin: 0 32rpx;
		}
		.list_box:last-child{
			border-bottom: 0rpx solid;
		}
		.user_list{
			background-color: #fff;
			border-radius: 24rpx;
			width: 686rpx;
			margin: 24rpx 32rpx;
			padding: 32rpx 0;
			.user_info{
				margin: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.user_img{
				width:64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.user_text{
				display: flex;
				color: #7C807F;
				font-size: 26rpx;
			}
			.list_num{
				width: 206rpx;
				height: 136rpx;
				margin-top: 16rpx;
				text-align: center;
				border-radius: 24rpx;
				background-color: #F9F6F6;
			}
		}
	}
</style>